<script setup lang="ts">
import { installProcessPopup } from '../components/InstallProcess.vue';
</script>

<template>
  <div class="bg grid grid-cols-[auto_1fr] w-full items-center pt-10 text-left lt-tablet:(grid-cols-1 pb-5 text-center) -mt-$main-base-margin">
    <div>
      <p class="text-5.5 text-sys-text-body lt-tablet:text-4">
        {{ $t('wj5Pc1vLlQzYjCxOspjz') }}
      </p>
      <I18nT keypath="av502YQryj9nh2vyoJhb8" tag="p" class="py-2.5 text-12 font-900 lt-tablet:text-9">
        <template #name>
          {{ $store.app.appName }}
        </template>
      </I18nT>
      <p class="lt-tablet:break-word text-4.5 text-sys-text-body lt-tablet:(inline-block w-70% text-3.5)">
        {{ $t('q6zIp4oKiFslee2x5Rv08') }}
      </p>
      <div class="mt-7.5 flex items-center gap-6 lt-tablet:(mt-5 flex-col)">
        <AButton
          class="ant-cover__Button-3d-primary min-w-50" type="primary"
          :size="$bp.tablet ? 'large' : 'middle'"
          @click="installProcessPopup.open()"
        >
          {{ $t('qjvRb3YvHgPvYDqwwtVG') }}
        </AButton>
        <div class="flex gap-5 text-6">
          <i class="i-local:ios-icon" />
          <i class="i-local:android" />
          <i class="i-local:window" />
        </div>
      </div>
    </div>
    <div class="text-right lt-tablet:(mt-5 flex-center)">
      <img src="../imgs/banner-img.png" alt="" class="h-90 lt-tablet:h-65">
    </div>

    <installProcessPopup.PresetComponent />
  </div>
</template>

<style scoped lang="scss">
.bg {
  background: radial-gradient(30.87% 30.87% at 50% 0%, #3e404c 0%, #1d1e24 100%);
}
</style>
